<template>
  <ul class="el-upload-list el-upload-list--text">
    <li tabindex="0" :class="isDelete?'el-upload-list__item is-success':'el-upload-list__item'" :key="file.id"  v-for="(file) in fileList">
      <a class="el-upload-list__item-name" @click="handlePreview(file)">
        <i class="el-icon-document icon_file_box" v-if="isDelete"></i>{{file.fileName || file.name}}
      </a>
      <label class="el-upload-list__item-status-label">
        <i class="el-icon-upload-success el-icon-circle-check"></i>
      </label>
      <i class="el-icon-close"  @click="handleDelete(file)" v-if="isDelete" ></i>
    </li>
  </ul>
</template>

<script>
export default {
  name: 'FileList',
  components: {
  },
  props: {
    fileList: {
      type: Array,
      default: []
    },
    isDelete: {
      type: Boolean,
      default: true
    },
  },
  data() {
    return {
    }
  },
  methods: {
    handleDelete(file) {
      this.$emit('on-delete', file)
    },
    handlePreview(file) {
      this.$emit('on-preview', file)
    }
  }
}

</script>

<style>
.el-upload-list__item{
  text-align: left;
}
.icon_file_box{
  vertical-align: bottom;
}
.file_name_box{
  vertical-align: top;
}


</style>
